import {
    getBanners,
    getSongMenu
} from '../../service/api_music'
import {
    rankingStore
} from '../../store/index'
import queryRect from '../../utils/query-rect'
import throttle from '../../utils/throttle'
// 节流(加入trailing让函数开始和结束分别计算一次，防止图片还没计算出高度)
const throttleQueryRect = throttle(queryRect, 1000, {trailing: true})

const rankingMap = {
    3778678: "hotRanking",
    19723756: "upRanking",
    3779629: "newRanking",
    2884035: "originRanking"
}

Page({
    data: {
        banners: [],
        swiperHeight: 150,
        recommendSongs: [],
        hotSongMenu: [],
        huayuSongMenu: [],
        rankings: {
            19723756: {},
            3779629: {},
            2884035: {}
        }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //获取页面数据
        this.getPageData()
        //共享数据存入store
        rankingStore.dispatch("getRankingDataAction")
        //从store获取共享数据
        rankingStore.onState("hotRanking", res => {
            if (!res.tracks) {
                return
            }
            //前六条数据，当推荐数据
            const recommendSongs = res.tracks.slice(0, 6)
            this.setData({
                recommendSongs
            })
        })
        //巅峰榜数据获取封装
        rankingStore.onState("newRanking", this.getRankingHandler(3779629))
        rankingStore.onState("originRanking", this.getRankingHandler(2884035))
        rankingStore.onState("upRanking", this.getRankingHandler(19723756))
    },
    handleSearchClick: function () {
        console.log("点击了搜索框")
        wx.navigateTo({
            url: '/pages/detail-search/index',
        })
    },
    /**
     * 页面数据
     */
    getPageData: function () {
        getBanners().then(res => {
            this.setData({
                banners: res.banners
            })
        })
        getSongMenu().then(res => {
            this.setData({
                hotSongMenu: res.playlists
            })
        })
        getSongMenu("华语").then(res => {
            this.setData({
                huayuSongMenu: res.playlists
            })
        })
    },
    handleSwiperImageLoaded: function () {
        console.log("轮播图片加载完成触发")
        //获取image组件的宽度高度（微信适配之后的）
        throttleQueryRect(".swiper-image").then(res => {
            const rect = res[0]
            console.log("加了防抖，限制执行次数")
            this.setData({
                swiperHeight: rect.height
            })
        })
    },
    /**
     * 巅峰榜数据
     * @param {*} res 
     */
    getRankingHandler: function (idx) {
        return (res) => {
            if (Object.keys(res).length === 0) {
                return
            }
            const name = res.name
            const coverImgUrl = res.coverImgUrl
            const playCount = res.playCount
            const songList = res.tracks.slice(0, 3)
            const rankingObj = {
                name,
                coverImgUrl,
                playCount,
                songList
            }
            const newRanking = {
                ...this.data.rankings,
                [idx]: rankingObj
            }
            this.setData({
                rankings: newRanking
            })
        }
    },
    handleMoreClick: function () {
        this.navigateToSongDetailPage("hotRanking")
    },
    handleRankingItemClick: function (event) {
        const idx = event.currentTarget.dataset.idx
        const rankingName = rankingMap[idx]
        this.navigateToSongDetailPage(rankingName)

    },
    navigateToSongDetailPage: function (rankingName) {
        wx.navigateTo({
            url: `/pages/detail-songs/index?ranking=${rankingName}&type=rank`,
        })
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {}
})